import React, { Component } from 'react';
import { Table } from 'antd';
import {getList} from "../api/index"
const columns = [
    {
        title: '名字',
        dataIndex: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
    },
    {
        title: '性别',
        dataIndex: 'sex',
    },
    {
        title: '爱好',
        dataIndex: 'likes',
    },
    {
        title: '所属城市',
        dataIndex: 'address',
    },
]

class Home extends Component {
    state = {
        data : [],
        num:1,
        total:5,
        selectedRowKeys: [], // Check here to configure the default column
    };
    componentDidMount(){
        const {num,total} = this.state
        getList({num,total}).then((res)=>{
            this.setState({
                data:res.data.data.res
            })
        })
    }
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        console.log("itemmmmmmmmmm");
        this.setState({ selectedRowKeys });
    };
    render() {
        let {data} = this.state;
        data = data.filter(item=>item.sex%2!==0?item.sex="男":item.sex="女")
        const { selectedRowKeys } = this.state;
        const pageSize = (pagination)=>{
            let num = pagination.current;
            let total = pagination.pageSize;
            getList({num,total}).then((res)=>{
                this.setState({
                    data:res.data.data.res
                })
            })
        }
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            hideDefaultSelections: true,
            selections: [
                {
                    key: 'all-data',
                    text: 'Select All Data',
                    onSelect: () => {
                        this.setState({
                            selectedRowKeys: [...Array(46).keys()], // 0...45
                        });
                        console.log("alllllll");
                        console.log(this.state.selectedRowKeys);
                    },
                },
                {
                    key: 'odd',
                    text: 'Select Odd Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                console.log("oddddd");
                                return false;
                            }
                            return true;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
                {
                    key: 'even',
                    text: 'Select Even Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                console.log("evennnnnnn");
                                return true;
                            }
                            return false;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
            ],
        }
        return (
            <div>
                <Table rowSelection={rowSelection} onChange={pageSize} pagination={{pageSize:5,total:25}} columns={columns} dataSource={data} />
            </div>
        );
    }
}

export default Home;